import { EditorView } from '@codemirror/view';
import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
import { tags } from '@lezer/highlight';

export const useCodeEditorTheme = () => {
	const createDarkTheme = () => {
		const monacoTheme = EditorView.theme({
			'&': {
				backgroundColor: '#1e1e1e',
				color: '#abb2bf',
				height: '100%'
			},
			'.cm-content': {
				caretColor: '#fff',
				color: '#abb2bf',
				backgroundColor: '#1e1e1e'
			},
			'.cm-selectionLayer': {
				zIndex: '2 !important', // 提高选中层的 z-index
				opacity: 0.5
			},
			'.cm-line': {
				backgroundColor: '#1e1e1e',
				paddingLeft: '4px'
			},
			'&.cm-focused .cm-cursor': {
				borderLeftColor: '#fff'
			},
			'&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
				backgroundColor: '#3e4451'
			},
			'.cm-gutters': {
				backgroundColor: '#252526',
				color: '#858585',
				border: 'none',
				paddingRight: '8px'
			},
			'.cm-activeLineGutter': {
				backgroundColor: '#252526'
			},
			'.cm-activeLine': {
				backgroundColor: '#2c313a'
			},
			'.cm-selectionMatch': {
				backgroundColor: '#3e4451'
			},
			'.cm-matchingBracket, .cm-nonmatchingBracket': {
				backgroundColor: '#3e4451',
				color: '#abb2bf'
			},
			'.cm-lineNumbers': {
				color: '#858585'
			},
			'.line-marker': {
				color: '#858585',
				transition: 'color 0.2s ease',
				cursor: 'pointer',
				userSelect: 'none',
				marginLeft: '-2px'
			},
			'.line-marker:hover': {
				color: '#c5c5c5'
			}
		});

		const highlightStyle = HighlightStyle.define([
			{ tag: tags.keyword, color: '#c678dd' },
			{ tag: tags.comment, color: '#7f848e', fontStyle: 'italic' },
			{ tag: tags.string, color: '#e5c07b' },
			{ tag: tags.function(tags.variableName), color: '#61afef' },
			{ tag: tags.number, color: '#d19a66' },
			{ tag: tags.bool, color: '#d19a66' },
			{ tag: tags.propertyName, color: '#e06c75' },
			{ tag: tags.variableName, color: '#abb2bf' },
			{ tag: tags.className, color: '#e5c07b' },
			{ tag: tags.definition(tags.variableName), color: '#e06c75' },
			{ tag: tags.operator, color: '#56b6c2' }
		]);

		return [monacoTheme, syntaxHighlighting(highlightStyle), EditorView.lineWrapping];
	};

	return { createDarkTheme };
};
